<template>
  <div class="CallDetails">
    <h3 class="top">
      <div>
        <span>角色：{{ identity }}</span>
        <span v-if="union_name" style="margin-left: 50px"
          >所属工会：{{ union_name }}</span
        >
      </div>
      <div>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <el-button
          style="margin-left: 10px"
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
        <el-button style="margin-left: 10px" size="small" @click="search"
          >导出EXCEL</el-button
        >
      </div>
    </h3>
    <div class="typeBox">
      <div class="card">
        <h3>
          <span class="point"></span>
          通话总次数
        </h3>
        <h1>
          <i class="iconfont">&#xe645;</i>
          {{ totalCount ? totalCount : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          有效通话时长
        </h3>
        <h1>
          <i class="iconfont">&#xe605;</i>
          {{ totalTimes ? totalTimes : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          总收益
        </h3>
        <h1>
          <i class="iconfont">&#xe61f;</i>
          {{ totalMoney ? totalMoney : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          通话宝石收益数
        </h3>
        <h1>
          <i class="iconfont">&#xe65b;</i>
          {{ callTotalMoney ? callTotalMoney : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          礼物宝石收益数
        </h3>
        <h1>
          <i class="iconfont">&#xe600;</i>
          {{ giveTotalMoney ? giveTotalMoney : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          其他宝石收益数
        </h3>
        <h1>
          <i class="iconfont">&#xe626;</i>
          {{ unlockTotalMoney ? unlockTotalMoney : 0 }}
        </h1>
      </div>
      <div class="card">
        <h3>
          <span class="point"></span>
          消耗金币数
        </h3>
        <h1>
          <i class="iconfont">&#xe6c8;</i>
          {{ totalCost ? totalCost : 0 }}
        </h1>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <el-table-column label="时间" prop="date"> </el-table-column>
      <el-table-column label="通话次数" prop="count"> </el-table-column>
      <el-table-column label="通话时长" prop="times"> </el-table-column>
      <el-table-column label="通话收益" prop="total_profit"> </el-table-column>
      <el-table-column label="详情" width="200" type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.list"
            border
            :header-cell-style="{ background: '#f5f7fa' }"
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column label="时间" prop="date"> </el-table-column>
            <el-table-column label="本地拨打IP" prop="loginIp">
            </el-table-column>
            <el-table-column label="通话来源" prop="utm_source">
            </el-table-column>
            <el-table-column label="通话对象" prop="nickName">
            </el-table-column>
            <el-table-column label="通话对象ID" prop="oppo_user_id">
            </el-table-column>
            <el-table-column label="通话对象IP" prop="oppoLoginIp">
            </el-table-column>
            <el-table-column label="通话时长" prop="times"> </el-table-column>
            <el-table-column label="有效通话时长" prop="activeTime">
            </el-table-column>
            <el-table-column label="通话宝石收益数" prop="get_diamod">
            </el-table-column>
            <el-table-column label="礼物宝石收益数" prop="gift_diamond">
            </el-table-column>
            <el-table-column label="其他宝石收益数" prop="unlock_diamond">
            </el-table-column>
            <el-table-column label="通话消耗金币数" prop="cost_coin">
            </el-table-column>
            <el-table-column label="获得评价" prop="discuss"> </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagination
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
// import Pagination from "@/components/Pagination"; // 分页
import { callDetailLog } from "@/api/UserManagement";
export default {
  // components: { Pagination },

  props: ["userId"],
  data() {
    return {
      identity: "",
      union_name: "",
      totalCount: 0,
      totalTimes: 0,
      totalMoney: 0,
      callTotalMoney: 0,
      giveTotalMoney: 0,
      unlockTotalMoney: 0,
      totalCost: 0,
      timeArr: [],
      startDate: "",
      endDate: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    search() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      const res = await callDetailLog({
        startTime: this.startDate,
        endTime: this.endDate,
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
      });
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.identity = res.data.identity;
        this.union_name = res.data.union_name;
        this.totalCount = res.data.totalCount;
        this.totalTimes = res.data.totalTimes;
        this.totalMoney = res.data.totalMoney;
        this.callTotalMoney = res.data.callTotalMoney;
        this.giveTotalMoney = res.data.giveTotalMoney;
        this.unlockTotalMoney = res.data.unlockTotalMoney;
        this.totalCost = res.data.totalCost;
        //  this.total = parseInt(res.data.)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.CallDetails {
  .top {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .typeBox {
    display: flex;
    flex-wrap: wrap;
    .card {
      height: 120px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      width: 300px;
      margin-top: 20px;
      margin-right: 20px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
    }
  }
}
</style>